<template>
  <div>
    <a @click="dialogVisible = true">
      <i class="el-icon-menu el-icon-right"></i>
    </a>
    <el-dialog title="文件管理" :visible.sync="dialogVisible" width="60%">
      <el-table
        :data="files.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%"
        :stripe="true"
        :size="size"
        height="300"
      >
        <el-table-column
          v-for="{ prop, label } in cols"
          :key="prop"
          :prop="prop"
          :label="label"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column width="150" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 1"
              @click.native.prevent="previewHandle(scope.row)"
              type="text"
              size="small"
            >预览</el-button>
            <el-button
              v-if="scope.row.status == 1"
              @click.native.prevent="downloadHandle(scope.row)"
              type="text"
              size="small"
            >下载</el-button>
            <el-button @click.native.prevent="deleteHandle(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="files.length"
      ></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import saveAs from "file-saver";
export default {
  name: "elfilemanager",
  props: {
    apiUrl: { type: String, required: true },
    isSimple: { type: Boolean, default: false },
    size: { type: String, default: "small" }
  },
  data: function() {
    return {
      dialogVisible: false,
      files: [],
      cols: [
        { prop: "fkey", label: "文件名称" },
        { prop: "fsize", label: "大小" },
        { prop: "mimeType", label: "类型" },
        { prop: "putTime", label: "上传时间" }
        // { prop: "status", label: "状态" }
      ],
      currentPage: 1,
      pageSize: 5
    };
  },
  mounted() {
    this.queryFiles();
  },
  methods: {
    queryFiles() {
      axios
        .get(this.apiUrl + "/api" + (this.isSimple ? "/v1" : "/v2") + "/files")
        .then(res => {
          if (res.status === 200) {
            this.files = res.data;
            for (let file of this.files) {
              file.mimeType = decodeURIComponent(file.mimeType);
              file.putTime =
                new Date(file.putTime).toLocaleDateString() +
                " " +
                new Date(file.putTime).toLocaleTimeString();
            }
          }
        });
    },
    //改变每页显示数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.queryFiles();
    },
    //改变页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryFiles();
    },
    previewHandle(row) {
      window.open(
        this.apiUrl +
          "/api" +
          (this.isSimple ? "/v1" : "/v2") +
          "/downloader/stream/" +
          encodeURI(row.fkey) +
          "?hash=" +
          row.hash
      );
    },
    downloadHandle(row) {
      axios
        .get(
          this.apiUrl +
            "/api" +
            (this.isSimple ? "/v1" : "/v2") +
            "/downloader/file/" +
            encodeURI(row.fkey) +
            "?hash=" +
            row.hash,
          {
            responseType: "blob"
          }
        )
        .then(res => {
          if (res.status === 201) {
            if (res.data) {
              let blob = new Blob([res.data], {
                type: row.mimeType
              });
              saveAs(blob, row.fkey);
            }
          }
        });
    },
    deleteHandle(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .delete(
              this.apiUrl +
                "/api" +
                (this.isSimple ? "/v1" : "/v2") +
                "/files/fkey/" +
                encodeURI(row.fkey) +
                "/fhash/" +
                row.hash
            )
            .then(res => {
              if (res.status === 200) {
                this.queryFiles();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "删除异常!"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped>
</style>